<template>
  <div>
    <basic-layout :title="title"
                  :showFilterBtn="true"
                  :showAddBtn="true"
                  @handleAdd="handleAdd"
                  @handleFilter="$refs.queryPopupRef.show = true">
      <div class="body_box_main">
        <van-tabs v-model="active" @change="changeTabs" color="#4eb3e9">
          <van-tab v-for="(item, index) in tabs" :title="item.name" :name="item.index">
            <div class="body_box">
              <van-row class="listCon">
                <van-pull-refresh
                  class="vanScroller"
                  v-model="refreshing"
                  @refresh="onRefresh">
                  <van-list
                    class="vanList"
                    v-model="loading"
                    :finished="finished"
                    :finished-text="listData.length ? '没有更多了' : ''"
                    @load="onLoad"
                  >
                    <div v-for="(item , index) in listData" :style="{ padding: calcMargin(index), }">
                      <div class="listMain">
                        <div class="main">
                          <div class="topMain" @click="jumpToDetail(item)">
                            <div class="title">
                              <span>{{ item.repairNo }}</span>
                              <van-tag class="vanTagStyle" color="#fff4e4" v-if="item.repairType === '2'">
                                <span>代</span>
                              </van-tag>
                            </div>
                            <div class="statusStyle">
                              {{ item.repairStatusLabel }}
                            </div>
                          </div>
                          <div class="midMain" @click="jumpToDetail(item)" v-if="item.repairStatus == '1'">
                            <div class="van-ellipsis topContent">
                              <span>报修区域:</span>&nbsp;
                              <span>{{ item.fdzyXxjjfcxxName }}</span>
                            </div>
                            <div class="buttonContent">
                              <div class="left">
                                <div class="van-multi-ellipsis--l2 f">
                                  <span>故障描述:</span>&nbsp;
                                  <span>{{ item.repairDesc }}</span>
                                </div>
                                <div class="van-ellipsis s">
                                  <span>报修时间:</span>&nbsp;
                                  <span>{{ item.createTime }}</span>
                                </div>
                              </div>
                              <div class="btn">
                                <van-button type="info" color="#f25454" plain size="mini"
                                            @click.stop.prevent="cancelHandle(item)">
                                  取消
                                </van-button>
                              </div>
                            </div>
                          </div>

                          <div class="midMain" @click="jumpToDetail(item)" v-else>
                            <div class="van-ellipsis topContent">
                              <span>报修区域:</span>&nbsp;
                              <span>{{ item.fdzyXxjjfcxxName }}</span>
                            </div>
                            <div class="buttonContent">
                              <div class="left_02">
                                <div class="van-multi-ellipsis--l2 f">
                                  <span>故障描述:</span>&nbsp;
                                  <span>{{ item.repairDesc }}</span>
                                </div>
                                <div class="van-ellipsis s">
                                  <span>报修时间:</span>&nbsp;
                                  <span>{{ item.createTime }}</span>
                                </div>
                              </div>
                              <!--                              <div class="btn">-->
                              <!--                                <van-button type="info" color="#f25454" plain size="mini" @click.stop.prevent="cancelHandle(item)">-->
                              <!--                                  取消-->
                              <!--                                </van-button>-->
                              <!--                              </div>-->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </van-list>
                  <van-empty
                    v-if="!loading && !listData.length"
                    class="custom-image"
                    :image="require('../../../../assets/images/empty.png')"
                    description="暂无数据"
                  />
                </van-pull-refresh>
              </van-row>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </basic-layout>


    <!--          打开右侧搜索栏-->
    <queryPopup ref="queryPopupRef" @handleSearch="search" @handleReset="handleReset">
      <van-form class="filterBox">
        <label>关键字</label>
        <van-field clearable v-model="queryParam.keyWord" placeholder="报修单号/申请人/申请人手机号/报修区域/报修地址/故障描述"/>
      </van-form>
      <van-form class="filterBox">
        <label>报修结果：</label>
        <van-field>
          <template #input>
            <div class="textCon" @click="showRepairResultHandle">
              <span v-if="!labelParam.repairResultLabel" style="color: #aaa">请选择</span>
              <span v-else>{{ labelParam.repairResultLabel }}</span>
            </div>
          </template>
        </van-field>
      </van-form>
    </queryPopup>


    <van-action-sheet v-model="showRepairResult"
                      cancel-text="取消"
                      :actions="repairResultList"
                      @select="repairResultConfirm"/>
  </div>
</template>
<script>

import {getRepairPageInfo, cancel} from "@api/srvAssurance/convApp";
import {queryDic} from "@api/common";

export default {
  name: 'index',
  props: {},
  components: {},
  data() {
    return {
      title: '我的报修',
      active: "1",
      tabs: [
        {
          index: "1",
          name: "处理中",
        },
        {
          index: "2",
          name: "已完成",
        },
        {
          index: "3",
          name: "已取消",
        },
      ],

      refreshing: false,
      loading: false,
      finished: false,
      listData: [],
      queryParam: {
        keyWord: '',
        repairStatus: '1',
        repairResult: '',
        pageNum: 1,
        pageSize: 10,
        totalNum: 0,
      },

      labelParam: {
        repairResultLabel: '',
      },

      repairResultList: [],
      showRepairResult: false,
    }
  },

  created() {
    this.initData();
  },
  computed: {},

  beforeMount() {
    let item = sessionStorage.getItem("convapp_repair_session");
    if (item) {
      this.active = item;
      this.queryParam.repairStatus = (this.active * 1);
    }
    this.getList();
  },

  methods: {
    cancelHandle(item) {
      this.$Dialog
        .confirm({
          title: "是否取消？",
        }).then(() => {
        cancel(item.repairInfoId).then(res => {
          if (res.code === 1000) {
            this.init();
          }
        })
      }).catch(() => {
      });
    },

    calcMargin(index) {
      if (index == 0) {
        return '10px 0px';
      } else {
        return '0px 0px 10px 0px';
      }
    },

    jumpToDetail(item) {
      this.$router.push({
        path: "/convapp/repairDetail",
        query: {param: item.repairInfoId}
      })
    },


    onLoad() {
      this.queryParam.pageNum++;
      this.getList();
    },

    onRefresh() {
      this.refreshing = false;
      this.finished = false;
      this.listData = [];
      this.queryParam.pageNum = 1;
      this.getList();
    },


    async getList() {
      this.loading = true;
      await getRepairPageInfo(this.queryParam)
        .then((res) => {
          this.loading = false;
          this.refreshing = false;
          if (res.code === 1000 && res.data) {
            this.queryParam.totalNum = res.data.total;
            this.listData = [...this.listData, ...res.data.records];
            if (this.listData.length >= res.data.total) {
              this.finished = true;
            }
          } else {
            this.finished = true;
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
        });
    },

    changeTabs(val) {
      this.clearQueryParam();
      this.init();
    },

    clearQueryParam() {
      this.labelParam.repairResultLabel = '';
      this.queryParam.keyWord = '';
      this.queryParam.repairResult = '';
    },

    init() {
      this.initQueryParam();
      this.onRefresh();
      sessionStorage.setItem("convapp_repair_session", this.active);
    },

    initQueryParam() {
      this.queryParam.repairStatus = (this.active * 1);
      this.queryParam.pageNum = 1;
      this.queryParam.pageSize = 10;
      this.queryParam.totalNum = 0;
      this.listData = [];
    },

    handleAdd() {
      this.$router.push({
        path: "/convapp/applyRepair",
      })
    },


    search() {
      this.$refs.queryPopupRef.show = false
      this.onRefresh()
    },

    handleReset() {
      this.labelParam.repairResultLabel = '';
      this.queryParam.keyWord = '';
      this.queryParam.repairResult = '';
      this.onRefresh();
    },

    showRepairResultHandle() {
      this.showRepairResult = true;
    },

    repairResultConfirm(item) {
      this.showRepairResult = false;
      this.queryParam.repairResult = item.value;
      this.labelParam.repairResultLabel = item.label;
    },

    initData() {
      queryDic('SA_EMPLOY_REPAIR_RESULT_CODE').then(res => {
        if (res.code === 1000 && res.data) {
          this.repairResultList = res.data;
        }
      });
    },

  },
}
</script>
<style lang="less" scoped>

.body_box_main {
  background-color: #f9f9f9;
  height: 100%;


  .body_box {
    background-color: #f9f9f9;
    height: 100%;

    .listCon {
      height: 100%;

      .vanScroller {
        height: 100%;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 0px !important;
          height: 0px !important;
        }

        .vanList {

          .listMain {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
            background: rgb(255, 255, 255);
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;
            max-height: 300px;
            padding: 5px 10px 0px 10px;


            .main {
              display: flex;
              flex-direction: column;
              justify-content: space-around;;
              width: 100%;


              .topMain {
                height: 40px;
                width: 100%;
                font-size: 16px;
                font-weight: 600;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                border-bottom: 1px solid #eee;

                .title {
                  display: flex;

                  .vanTagStyle {

                    span {
                      color: #f69b52;
                      font-weight: 600;
                    }

                  }
                }

                .statusStyle {
                  color: #ffc109;
                  font-size: 13px;
                }
              }
            }

          }

        }
      }
    }
  }
}

/deep/ .van-tabs {
  height: 100%;
}

/deep/ .van-tabs__content {
  height: calc(100% - 44px);
}

/deep/ .van-tab__pane {
  height: 100%;
}


.midMain {
  //max-height: 120px;
  max-height: 120px;
  //min-height: 80px;
  //height: 100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  border-bottom: 1px solid #eee;

  .topContent {
    color: #9e9e9f;
    margin-top: 5px;
    height: 24px;
    line-height: 24px;

    span:first-child {
      font-size: 14px;
    }

    span:last-child {
      font-size: 14px;
      color: #504f4f;
    }
  }

  .buttonContent {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;

    .left {
      width: 80%;

      .f {
        color: #9e9e9f;
        margin-top: 5px;
        //height: 24px;
        //line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }


      .s {
        color: #9e9e9f;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 24px;
        line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }

    }

    .left_02 {
      width: 100%;

      .f {
        color: #9e9e9f;
        margin-top: 5px;
        //height: 24px;
        //line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }


      .s {
        color: #9e9e9f;
        margin-top: 5px;
        margin-bottom: 5px;
        height: 24px;
        line-height: 24px;

        span:first-child {
          font-size: 14px;
        }

        span:last-child {
          font-size: 14px;
          color: #504f4f;
        }
      }

    }


    .btn {
      width: 20%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .van-button {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        border-radius: 17px;
        font-size: 13px;
      }
    }
  }

  //&:before {
  //  content: '';
  //  position: absolute;
  //  margin-top: 100px;
  //  width: 100%;
  //  height: 1px;
  //  background: #8080804a;
  //}

}

.flexBtn {
  display: flex;
  justify-content: space-between;

  div {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1e93ff;
    font-size: 15px;
  }

  p {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1e93ff;
    font-size: 15px;
  }

  div:nth-of-type(1) {
    box-sizing: border-box;
    border-right: 1px solid #eee;
    color: #f25454;
  }
}


</style>
